<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix">
			<uni-search-bar 
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="focus" 
			 :placeholder="placeholder" 
			 @confirm="confirm"
			  @cancel="cancel"
			></uni-search-bar>
		</view>
		<view class="page__bd" style="padding-top: 100rpx;">
		<scroll-view :scroll-y="true" style="max-height: 250px;" class="scroll-Y">
				<view class="flex padding">
					<view class="tui-col-12 tui-right"> 
						<button type="primary" size="mini" @click="confirmData">完成</button>
					</view>
				</view>
		</scroll-view>
		<om-divider :gap="[0, 0]"></om-divider>
		<uni-list v-if="commonData.datas">
			<uni-list-item v-for="(item, index) in commonData.datas" :key="index" :showArrow="false" :showClear="true" @iconClear="clearFunc(item)">
				<view class="tui-flex align-center">
					<view class="tui-col-5">{{ item[namefield] }}</view>
					<view class="tui-col-7">
						<textarea
							auto-height 
							:style="{'line-height':'16px','max-width':'185px'}"
							v-model="item[namefieldValue]" 
							:adjust-position="true"
							placeholder="请输入"/>
						<!-- <input v-model="item[namefieldValue]" placeholder="请输入" /> -->
					</view>
				</view>
			</uni-list-item>
		</uni-list>
						
	    <!-- <uni-list v-if="commonData.datas">
	    	<view v-for="(item, index) in commonData.datas" :key="index">
	    		<uni-list-item
	    			showArrow
	    			:title="getName(item)"
	    			:avatar="index + 1"
	    			@click="itemtap(item)"
	    			:note="getNote(item)"
	    			:extraText="getExtra(item)"
	    		></uni-list-item>
	    	</view>
	    </uni-list> -->
	  </view>
	  <tui-loadmore :visible="commonData.loadding"></tui-loadmore>
	  <tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
	  <tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import listLoad from '../../../static/js/listLoad.js';
	import {
		hasValue
	} from '@/static/js/formUtil.js';
	const app = getApp()
	export default {
		data() {
			return {
				scrollTop: 0,
				searchStr:"",
				commonData: {
					datas:[],
					method:'get'//url对应的服务器方法的请求类型
				},
				dataMap:{},
				pageTitle:"搜索",
				placeholder:"关键字查找",
				cachename:'',//缓存名称（必有）
				url:'',//服务器路径（必有）
				defaultData:"",
				namefield: "dicname",//保证正确，显示属性,列标题
				namefieldValue: '',
				namesplit:"|",//间隔符
				notefield: "",//保证正确，显示属性，列副标题
				notesplit:"|",//间隔符
				extrafield: "",//保证正确，显示属性，列右侧提示
				extrasplit:"|",//间隔符
				searchfield:"searchStr",//查询属性
				other:{},//其他查询属性
				initload:false,
				focus:true,
				isLoadMore:true,
			}
		},
		watch: {
		　　datas(newValue, oldValue) {
				let _that = this
		　　　　newValue.forEach((item)=>{
					_that.dataMap[item.id] = item
				})
		　　}
		},
		created: function () {
		  this.initData = this._.debounce(this.initData, 300)
		},
		methods: {
			clearFunc(item){
				let _that = this;
				item[_that.namefieldValue] = '';
			},
			confirmData(){
				let _that = this;	
				uni.setStorage({
				   key:  _that.cachename,
				   data: JSON.stringify(_that.commonData.datas)
				})
				uni.navigateBack();
			},
			cancel(){
				this.commonData.datas = []
			},
			confirm(e){
				let _that = this;
				if (e && e.value) {
				  if ((!this.searchStr && e.value.trim()) || (this.searchStr && e.value.trim() && this.searchStr != e.value.trim())) {
					this.searchStr = e.value.trim()
					_that.initData()
				  }
				}else{
					this.searchStr = ''
					if(this.initload){
						_that.initData()
					}else{
						this.commonData.datas= []
					}
				}
			},
			initData(){
				let query = {}
				Object.assign(query, this.other)
				query[this.searchfield] = this.searchStr
				if(this.defaultData){
					if(this.searchStr){
						let namefield = this.namefield
						let dataList = []
						for(let item of this.defaultData){
							if(item[namefield].indexOf(this.searchStr) !== -1){
								dataList.push(item)
							}
						}
						this.commonData.datas = dataList
					}else{
						this.commonData.datas = this.defaultData
					}
					
				}else{
					listLoad.initData(this,this.url,query)
				}
			},
			searchClear() {
				this.commonData = {}
			 },
			itemtap: function(item) {
				let _that = this;
								
				uni.setStorage({
				   key:  _that.cachename,
				   data: item
				})
				uni.navigateBack();
			 },
			 getName(item){
				var s = ""
				if(this.namefield){
					var arr = this.namefield.split(this.namesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.namesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 },
			 getNote(item){
				var s = ""
				if(this.notefield){
					var arr = this.notefield.split(this.notesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.notesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 },
			 getExtra(item){
				var s = ""
				if(this.extrafield){
					var arr = this.extrafield.split(this.extrasplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.extrasplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 }
		},
		onLoad(options) {
			this.pageTitle = options.title||"搜索"
			uni.setNavigationBarTitle({
			  title: this.pageTitle
			})
			if(!options.cachename){//缓存名称
				this.om.toast('没有传递缓存名称')
			}
			this.cachename = options.cachename
			
			if(!options.url ){//搜索路径
				if(!options.defaultData){
					this.om.toast('没有传递查询路径')
				}
			}
			this.url = options.url
			if(options.initload){//数据是否初始加载
				this.initload = true
			}
			if(options.namefield){//列标题字段
				this.namefield = options.namefield
			}
			if(options.namefieldValue){
				this.namefieldValue = options.namefieldValue
			}
			if(options.noLoadMore ){
				this.isLoadMore = false
			}
			if(options.searchfield){//查询字段
				this.searchfield = options.searchfield
			}
			if(options.notefield){//加载对象列表的显示属性
				this.notefield = options.notefield
			}
			if(options.extrafield){//加载对象列表的显示属性
				this.extrafield = options.extrafield
			}
			if(options.method){//加载对象列表的显示属性
				this.commonData.method = options.method
			}
			if(options.placeholder){//搜索提示
				this.placeholder = options.placeholder
			}
			if(options.other){//其他查询参数
				var json = JSON.parse(options.other);
				for(var j in json){
					if(hasValue(json[j])){
						this.other[j] = json[j];
					}
				}
			}
			if(options.namesplit){//间隔符
				this.namesplit = options.namesplit
			}
			if(options.notesplit){//间隔符
				this.notesplit = options.notesplit
			}
			if(options.extrasplit){//间隔符
				this.extrasplit = options.extrasplit
			}
			if(options.defaultData){ //默认数据
				this.defaultData = JSON.parse(options.defaultData)
			}
			this.confirm()
			var _that = this
			this.$nextTick(function(){
				_that.focus = true
			})
		}, 
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this)
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if(this.isLoadMore){
				listLoad.reachBottom(this)
			}
		}
	}
</script>

<style>

</style>